<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*第一种*/
        /*.parent {*/
        /*    width: 400px;*/
        /*    height: 400px;*/
        /*    background: #0b4956;*/
        /*    display: flex;*/
        /*    justify-content: center;*/
        /*    align-items: center;*/
        /*}*/

        /*.child {*/
        /*    width: 200px;*/
        /*    height: 200px;*/
        /*    background: #00a4ff*/
        /*}*/
        /*第二种*/
        /*.parent{*/
        /*    width: 500px;*/
        /*    height: 500px;*/
        /*    background: #9cd583;*/
        /*    position: relative;*/
        /*}*/
        /*.child{*/
        /*    height: 200px;*/
        /*    width: 200px;*/
        /*    background: rgba(45, 45, 45, 0.5);*/
        /*    position: absolute;*/
        /*    left: 50%;*/
        /*    top: 50%;*/
        /*    transform: translate(-50%,-50%);*/
        /*}*/
        /*第三种*/
        .parent{
            width: 350px;
            height: 350px;
            background: #0077aa;
            position: relative;
        }
        .child{
            width: 200px;
            height: 200px;
            background: #f5b7b7;
            position: absolute;
            left: 0;top: 0;right: 0;bottom: 0;margin: auto;
        }
    </style>
</head>
<body>

</body>
</html>
<div class="parent">
    <div class="child"></div>
</div>
